<template>
  <div>
    <el-dialog
      title="新增模型"
      class="add-model-dialog"
      :visible.sync="addModel.showDialog"
      width="50%"
    >
      <div class="name-wrap">
        名称：
        <el-input placeholder="名称" v-model="addModel.name"></el-input>
      </div>
      <div class="total-score-wrap">
        总分：
        <el-input-number v-model="addModel.totalScore" :min="1" label="描述文字"></el-input-number>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addModel.showDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitAddModel">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改模型名称"
      class="edit-model-name-dialog"
      :visible.sync="editModelNameDlg.showDialog"
      width="50%"
    >
      <div class="name-wrap">
        名称：
        <el-input placeholder="名称" v-model="editModelNameDlg.name"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editModelNameDlg.showDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitEditModelName">确 定</el-button>
      </span>
    </el-dialog>
    <div class="input-row">
      <el-button type="primary" @click="clickNewModel">新增评分模型</el-button>
    </div>
    <el-table :data="scoreModelList" style="width: 100%">
      <el-table-column label="序号" width="80" prop="index" />
      <el-table-column label="评分模型名称" width="180" prop="name" />
      <el-table-column label="总分" width="80" prop="totalScore" />
      <el-table-column label="状态" width="80" prop="statusDesc" />
      <el-table-column label="新增日期" width="180" prop="createTime" />
      <el-table-column label="最后修改日期" width="180" prop="updateTime" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editEvalOrg(scope.$index, scope.row)">配置报送机构</el-button>
          <el-button
            size="mini"
            type="warning"
            @click="editScoreItem(scope.$index, scope.row)"
          >设置评分子项</el-button>
          <el-button size="mini" type="success" @click="editModelName(scope.$index, scope.row)">修改名称</el-button>
          <el-button
            size="mini"
            type="info"
            @click="editModelTotalScore(scope.$index, scope.row)"
          >修改总分</el-button>
          <el-button
            size="mini"
            type="danger"
            :disabled="!(scope.row.status === 0)"
            @click="haltModel(scope.$index, scope.row)"
          >停用</el-button>
          <el-button size="mini" type="danger" @click="deleteModel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  Input,
  Button,
  Dialog,
  InputNumber,
  Table,
  TableColumn
} from "element-ui";
import {
  addNewModel,
  getModelList,
  editModelName,
  deleteScoreModel
} from "@/api/score.js";
export default {
  name: "score-model",
  components: {
    [Input.name]: Input,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [InputNumber.name]: InputNumber,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn
  },
  data() {
    return {
      addModel: {
        showDialog: false,
        name: null,
        totalScore: null
      },
      editModelNameDlg: {
        showDialog: false,
        id: null,
        name: null
      },
      scoreModelList: []
    };
  },
  mounted() {
    this.refreshList();
  },
  methods: {
    refreshList() {
      getModelList({})
        .then(res => {
          this.scoreModelList = res;
          this.scoreModelList.forEach(
            (item, index) => (item.index = index + 1)
          );
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    clickNewModel() {
      this.addModel.name = null;
      this.addModel.totalScore = null;
      this.addModel.showDialog = true;
    },
    submitAddModel() {
      addNewModel({
        name: this.addModel.name,
        totalScore: this.addModel.totalScore
      })
        .then(res => {
          this.addModel.showDialog = false;
          this.refreshList();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    haltModel(index, row) {
      console.log("halt", row);
    },
    editModelName(index, row) {
      this.editModelNameDlg.id = row.id;
      this.editModelNameDlg.name = row.name;
      this.editModelNameDlg.showDialog = true;
    },
    submitEditModelName() {
      editModelName({
        id: this.editModelNameDlg.id,
        name: this.editModelNameDlg.name
      })
        .then(res => {
          this.editModelNameDlg.showDialog = false;
          this.refreshList();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    editModelTotalScore(index, row) {
      console.log("total score", row);
    },
    deleteModel(index, row) {
      this.$confirm("此操作将永久删除该模型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteScoreModel(row.id)
            .then(res => {
              this.refreshList();
            })
            .catch(errMsg => this.$alert(errMsg.msg));
        })
        .catch(() => {});
    },
    editEvalOrg(index, row) {
      this.$router.push({ path: `/score-model-org/${row.id}` });
    },
    editScoreItem(index, row) {
      this.$router.push({ path: `/score-model-item/${row.id}` });
    }
  }
};
</script>
<style lang="stylus" scoped>
.add-model-dialog {
  .name-wrap {
    .el-input {
      width: 200px;
    }

    margin-bottom: 5px;
  }

  .total-score-wrap {
    .el-input {
      width: 100px;
    }
  }
}

.edit-model-name-dialog {
  .name-wrap {
    .el-input {
      width: 200px;
    }
  }
}
</style>